<template>
  <div class="sharecontent">
    <div class="sharecontent_sendmsg">
      <van-field v-model="message" :placeholder="this.$t('lang.发消息')" />
    </div>
    <form action="/">
      <van-search
        v-model="searchKey"
        show-action
        :action-text="$t('lang.取消')"
        :placeholder="this.$t('lang.请输入搜索关键词')"
      />
    </form>
    <div class="sharecontent_userlist">
      <ItemPanelHeader
        :item="sitem"
        v-for="(sitem, index) in items"
        :key="'shareUserList_' + index"
      >
        <!-- <a
          href="javascript:;"
          slot="itemPanelHeaderMenu"
          @click="shareClickHandle(sitem, index)"
          >{{ $t("lang.发送") }}</a
        > -->
        <ShareButton
          :item="sitem"
          @shareHandle="shareClickHandle"
          slot="itemPanelHeaderMenu"
        ></ShareButton>
      </ItemPanelHeader>
    </div>
  </div>
</template>
<script>
export default {
  name: "ShareContent",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    ItemPanelHeader: () =>
      import(
        /* webpackChunkName:"itemPanelHeader" */ "../../components/common/itemPanel/itemPanelHeader.vue"
      ),
    ShareButton: () =>
      import(
        /* webpackChunkName:"shareButton" */ "../../components/common/shareButton.vue"
      ),
  },
  created() {
    this.items = [
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
      },
      {
        userId: "0123456",
        userHead:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
        nickName: "undefined",
        position: "中国",
        isNewContent: true,
      },
    ];
  },
  data() {
    return {
      message: "",
      searchKey: "",
      items: [],
    };
  },
  methods: {
    shareClickHandle(item) {},
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.sharecontent {
  .sharecontent_userlist {
    height: 290 / @base;
    overflow: scroll;
    overflow-x: hidden;
  }
}
</style>
